<template>
    <el-row class="page">
      <!-- 导航栏 -->
      <Navigation v-bind:navi_index="navi_index"/>
      <el-col :span="24">
        <h1 style="text-align: center">欢迎使用Mocktool2</h1>
        <br>
        <div style="text-align: left;margin-left: 10%;margin-right: 10%">
          <p>Mocktool2是用于Http接口调试与测试的工具，初次启动后，请先前往设置页面进行端口配置！</p>
          <br>
          <h2>1. 设置页面</h2>
          <p>设置页面是用于服务器基本全局参数设置的页面，设置方法如图所示</p>
          <img src="../assets/setting_page.png" class="" width="60%"/>
          <br>
          <h2>2. 接口页面</h2>
          <p>接口页面时用于配置调试接口的工作台页面，左边部分是项目管理，右边部分是选中项目的接口配置</p>
          <img src="../assets/editor_page.png" class="" width="60%"/>
          <p>我们尝试新建一个接口</p>
          <br>
          <h2>3. 新建接口</h2>
          <p>点击前面说到的新建接口按钮后，会弹出一个接口编辑对话框，大致功能如图所示</p>
          <img src="../assets/record_page.png" class="" width="60%"/>
          <br>
          <h2>4. 地址参数匹配规则</h2>
          <p>所谓地址参数，就是请求该接口时URL上携带的参数，比如http://feiniu.com/testapi?author=halfman&job=android, 在这条地址种，有两个参数，分别为author与job。Mocktool可以通过设定一定的规则，只有规则满足时，接口才会被拦截，具体操作如图所示：</p>
          <img src="../assets/record_url_match_page.png" class="" width="60%"/>
          <br>
          <h2>5. 表单参数匹配规则</h2>
          <img src="../assets/record_body_match_page.png" class="" width="60%"/>
          <P>Mocktool除了支持地址参数外，也支持表单请求的参数匹配，匹配方式为正则匹配与JSON结构匹配两种</p>
          <p>正则匹配简单的讲就是当指定名称的表单参数的内容，匹配了此处设定的正则表达式时，就算匹配，比如，假设我要匹配参数data中存在单词test，则可以设定参数名为data，匹配类型选择REGX，表达式为：test</p>
          <br>
          <p>而JSON表达式匹配简单的讲，就是当某表单参数为JSON字符串时，可以使用改类型匹配，比如，我希望json字符串内容的表单参数data中最外层的pageIndex为1时，匹配，则我可以使用表达式{"pageIndex":"1"}，这样，当接口表单参数data的json最外层存在pageIndex且为1时，就会匹配。另外需要注意的是，JSON规则暂时不支持一切形式数组，会直接忽略！！</p>
          <br>
          <h2>6. 出参响应内容覆盖</h2>
          <img src="../assets/record_override_page.png" class="" width="60%"/>
          <p>此处用于编辑要覆盖的响应内容，HTML与PLAIN设置一般选择PLAIN即可，部分浏览器显示模拟的HTML时需要改为HTML才能正确显示，记得勾上上面的覆盖响应</p>
          <br>
          <h2>7. 最后</h2>
          <p>全部操作完成后，别忘了点击右下角保存，否则无效！！！</p>
          <br>
        </div>
      </el-col>
    </el-row>
</template>

<script>
import Navigation from '../components/Navigation'
export default {
  components: {
    'Navigation': Navigation
  },
  data () {
    return {
      navi_index: '/'
    }
  }
}
</script>
